<!-- 优惠券中心  -->
<template>
  <s-layout title="优惠券" :bgStyle="{ color: '#f2f2f2' }">
    <s-empty
      v-if="state.pagination.total === 0"
      icon="/static/coupon-empty.png"
      text="暂无优惠券"
    ></s-empty>
    <view v-for="item in state.pagination.data" :key="item.id">
      <s-coupon-list
        :data="item"
      >
      <!-- @tap="
        sheep.$router.go('/pages/couponSend/detail', {
          id: item.id,
        })
      " -->
        <template #default>
          <button
            class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
            :class="item.get_status != 'can_get' ? 'border-btn' : ''"
            @click.stop="getBuy(item.id)"
            :disabled="item.get_status != 'can_get'"
          >
            发放
          </button>
        </template>
      </s-coupon-list>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import { computed, reactive } from 'vue';
  import _ from 'lodash';

  // 数据
  const pagination = {
    data: [],
    current_page: 1,
    total: 1,
    last_page: 1,
  };

  const state = reactive({
    currentTab: 0,
    userId: 0,
    pagination: {
      data: [],
      current_page: 1,
      total: 1,
      last_page: 1,
    },
    loadStatus: '',
    type: '',
  });

  async function getData() {
    const res = await sheep.$api.coupon.listByGoods2();
    state.pagination.data = res.data
    console.log(1111, sheep.$store('user'))
  }
  
  async function getBuy(id) {
    const { code, msg } = await sheep.$api.coupon.sendCoup({
        id,
        user_ids: state.userId
    });
    if (code === 1) {
      uni.showToast({
        title: msg,
      });
      setTimeout(() => {
        state.pagination = pagination;
        getData();
      }, 1000);
    }
  }

  onLoad((Option) => {
      state.userId = Option.userId
      getData();
  });
</script>
<style lang="scss" scoped>
  .card-btn {
    // width: 144rpx;
    min-width: 128rpx;
    padding: 0 16rpx;
    height: 50rpx;
    border-radius: 40rpx;
    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
    color: #ffffff;
    font-size: 24rpx;
    font-weight: 400;
  }
  .border-btn {
    background: linear-gradient(90deg, var(--ui-BG-Main-opacity-4), var(--ui-BG-Main-light));
    color: #fff !important;
  }
  .disabled-btn {
    background: #cccccc;
    background-color: #cccccc !important;
    color: #fff !important;
  }
</style>
